<template>
  <div class="examQuestion">
    <Header></Header>
    <div class="bgcolor">
      <div class="wrap exam">
        <div class="question">
          <div class="left_top">{{title}}</div>
          <div class="question_list" v-for="(item,index) in list" :key="index">
            <div class="question_title">{{item.title}}
            </div>
            <ul v-for="(opt,idx) in item.options" :key="idx"  @change="handleRadioChanges(idx,opt.value)">
             <li >
               <!-- 单选 -->
                <el-radio-group v-model="radio"  v-if="item.type!=2" >
                   <el-radio :label="opt.name" data-index="idx"  > {{opt.value}}. {{opt.name}}</el-radio>
                </el-radio-group>
              </li>
              <li @change="handlecheckbox(index,opt.label)">
                <!-- 多选 -->
                <el-checkbox-group v-model="checkList"  v-if="item.type==2">
                    <el-checkbox :label="opt.label" > {{opt.value}}. {{opt.name}}</el-checkbox>
                </el-checkbox-group>
              </li>
            </ul>
          </div>
        
        </div>
        <div class="scantron">
          <div class="timebg">
            <van-count-down class="text" :time="time" format="HH : mm : ss " />
            <p>剩余时间</p>
          </div>
          <div class="dtk clearfix">
            <div class="dtk_left">
              <img src="@/assets/images/dtk.png" alt="" /> 答题卡
            </div>
            <div class="dtk_right">
              <span class="circle"></span> 未做答
              <span class="circle ok"></span> 对
              <span class="circle error"></span> 错
            </div>
          </div>
         <div class="numbers">
            <p style="padding: 30px 0 10px" class="font18">题目列表</p>
            <div class="biao">
              <span v-for="(item,index) in list" :key="index">{{index+1}}</span>
            </div>
          </div>
          <el-row style="text-align: center; margin-top: 30px">
            <el-button type="primary" class="btn" @click="dialogVisible = true"
              >交卷</el-button
            >
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <div style="text-align:center;">
        <img src="@/assets/images/sucess.png" alt="" class="expression" />
         <!-- <img src="@/assets/images/miss.png" alt="" class="expression" /> -->
        <span class="font24" style="padding-bottom: 20px; display: block;margin-top: 83px;"
          >成绩合格</span
        >
        <p class="font20">
          你还剩 <span class="red">1</span> 题未做，答错
          <span class="red">1</span> 题
        </p>
        <p class="font20">考试得 <span class="red">96</span>分</p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">继续答题</el-button>
        <el-button type="primary" @click="submitBtn"
          >确认交卷</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/layout/header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      time: 60 * 60 * 1000, // 倒计时 给出毫秒数
      dialogVisible: false,
      title:'',
      type:'',
      radio:'', //选中
      checkList:[],
      list:[],
      index:0,
      shoarr:[],
      score:0
    };
  },
   mounted(){
    this.id = this.$route.query.id
    this.title = this.$route.query.name
    this.getData()
  },
  methods:{
    getData(){
      this.$axios.post("/api/Answers/getexam",{lm_id:this.id}).then(res=>{
        this.list = res.data.data
        // console.log(res.data)
      })
    },
    submitBtn(){
      this.$axios.post("/api/Answers/exam",{exam_id:0,score:this.score}).then(res=>{
        this.dialogVisible = false
        // console.log(res.data)
      })
    },
    handleRadioChanges(index,strnum){//index,选中题目的下标，strnum你选中的那个选项，实际上也是个index
          console.log(index,strnum)
          let data = {name:0,val:0};
          data.name = index;
          data.val = parseInt(strnum);
          this.shoarr.push(data);//将我选中的哪一题，哪个选项存到实现准备好的数组shoarr
          let myarr=this.shoarr;
          for(var i=0;i<myarr.length;i++){
            for(var j=i+1;j<myarr.length;j++){
              if(myarr[i].name==myarr[j].name){
                myarr.splice(i,1);
                j--;
              }
            }
          }//数组去重，以最后一个选中为准
          this.shoarr=myarr;
        },
      handlecheckbox(idx,checked){
      console.log(idx,checked)
      }
  }
};
</script>
<style scoped>
.bgcolor {
  background: #f5f5f5;
  padding: 30px 0;
}
.exam {
  position: relative;
}
.question {
  width: 69%;
  margin-right: 20px;
  padding: 20px 10px;
  background-color: white;
  max-height: 700px;
  overflow-x: scroll;
}
.question_title {
  margin-bottom: 10px;
  font-weight: bold;
}
.question_list {
  margin-bottom: 15px;
}
.question_list ul li {
  padding: 10px;
}
.scantron {
  width: 329px;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #979797;
  display: inline-block;
}
.scantron .timebg {
  background: url(../../assets/images/timebg.png) no-repeat;
  height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scantron .timebg .text {
  color: #FDA401;
  font-size: 32px;
}
.dtk {
  margin-top: 10px;
  padding: 0 15px;
}
.dtk_left {
  float: left;
  font-size: 16px;
}
.dtk_left img {
  display: inline-block;
  vertical-align: middle;
}
.dtk_right {
  float: right;
}
.ok {
  background-color: #FF3E44;
}
.error {
  background-color: #31D274;
}
.red {
  color: red;
}
.numbers .biao span {
  display: inline-block;
  margin: 0 10px 10px 0;
  width: 29px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #979797;
}
.btn {
  text-align: center;
  font-size: 20px;
  width: 240px;
}
.expression{
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -150px;
    margin-top: -122px;
}
.left_top{
  border-bottom:1px solid #E1E1E1;
  font-size: 20px;
  padding-bottom: 15px ;
  margin-bottom: 10px;
}
</style>